<!DOCTYPE html>
<html>
    <head>
        <title>MEdia</title>
        <link rel="stylesheet" type="text/css" href="pageLayout.css" />
        <link rel="stylesheet" type="text/css" href="easySlides.default.min.css" />
        <style type="text/css">
            .minbody, .featured     {height:840px;}
            #musicheader            {background:url(images/header.jpg);}
            .featured{
                width:800px;
                float:right;
            }
            .featuredproducttype{
                margin-top:40px;
                height:800px;
            }
            .minheader              {height:550px;}
        </style>
        <script type="text/javascript" src="jquery-latest.pack.js"></script>
        <script type="text/Javascript" src="jquery.easyslides.min.v1.1.js"></script>
        <script type="text/javascript" src="javascript.js"></script>
        <script>
            $(document).ready(function(){
            var myOptions = {
                noImages: 6, 
                path: "images/slideshowimages/",
                captions: { 
                    1: '<b>Welcome to our website!</b>',
                    2: '<b>It is still a bit empty...</b>',
                    3: '<b>Not much features yet...</b>',
                    4: '<b>More will be added soon...</b>',
                    5: '<b>Website is still in progress...</b>',
                    6: '<b>Register now!</b>'
                },
                links: { 
                    1:"http://www.google.com",
                    2:"http://www.yahoo.com",
                    3:"http://w3schools.com",
                    4:"http://www.jquery.com",
                    5:"http://www.youtube.com",
                    6:"regForm.html"
                },
                linksOpen:'newWindow',
                timerInterval: 6500,
                randomise: FALSE 
            };
            $('#example_1_container').easySlides(myOptions);
            })
        </script>
    </head>
    <body>
        <?php
        // put your code here
        ?> 
        <div class="mainheader">
            <div class="minheader">
                <div class="outsideheader">
                    <div class="navbar">
                        <ul>
                            <li><a href='index.html'><img src="images/logo.png"/></a></li>
                            <li><a href='categories.html'>books</a></li>
                            <li><a href='categories.html'>music</a></li>
                            <li><a href='categories.html'>movies</a></li>
                            <li><a href=''>about</a></li>
                            <li><a href=''>contact</a></li>
                            <li><form><input id="search" type="text" value="Search" onfocus="clearText(this)" onBlur="checkIfEmpty(this)"/></form></li>
                        </ul>
                    </div>
                    <div id="accountbar">
                        <div class="accountbutton">
                            <span>0</span>
                            <div id="cartitemphrasecontainer">
                                <a id="cartitemsphrase">cart items</a>
                            </div><br><br>
                            <a>check out</a>
                        </div>

                        <div onmouseover="unhideLogin()" onmouseout="hideLogin()" class="accountbutton" id="logreg">
                            <a id="logregphrase">login/<br>register</a>
                        </div>

                        <div id="logregarea">
                            <div id="login" onmouseover="unhideLogin()" onmouseout="hideLogin()">
                                <form method="POST" action="LoginAction.php">
                                    <a>Username</a><br><input type="text"/><br>
                                    <a>Password</a><br><input type="password"/><br>
                                    <input type="checkbox"/>
                                    <a>Keep me logged in</a>
                                    
                                    <input type="submit">
                                </form>
                            </div>
                            <div id="registerbutton" onmouseover="unhideLogin()" onmouseout="hideLogin()"><a href="register.html">Register</a></div>
                        </div>

                    </div>
                </div>
                <div id="example_1_container" class="easy_slides_container"></div>
            </div>
        </div>

        <div class="mainbody">
            <div class="minbody">
                <div class="sidebar">
                    <ul>
                        <li><a>>   genre</a></li>
                        <li><a>>   order by</a></li>
                    </ul>
                </div>
                <div class="featured">
                    <div class="featuredproducttype">
                        <a class="label">featured products</a>
                        <div class="product" id="p1" onmouseover="largeCanvas()" onmouseout="smallCanvas()">
                            <img src="images/takecare.jpg" class="productimage"/>
                            <div class="canvas" id="c1" onmouseover="largeCanvas()" onmouseout="smallCanvas()">
                                <a class="productname">Take Care</a>
                                <a class="productprice">$10.00</a><br>
                                <a class="producttype">Music</a> 
                            </div>
                        </div>
                        <div class="product">
                            <img src="images/doowops.jpg" class="productimage"/>
                            <div class="canvas">
                                <a class="productname">Doo Wops & Hooligans</a>
                                <a class="productprice">$10.00</a><br>
                                <a class="producttype">Music</a> 
                            </div>
                        </div>
                        <div class="product">
                            <img src="images/fame.jpg" class="productimage"/>
                            <div class="canvas">
                                <a class="productname">F.A.M.E.</a>
                                <a class="productprice">$10.00</a><br>
                                <a class="producttype">Music</a> 
                            </div>
                        </div>
                        <div class="product">
                            <img src="images/projectx.jpg" class="productimage"/>
                            <div class="canvas">
                                <a class="productname">Project X</a>
                                <a class="productprice">$10.00</a><br>
                                <a class="producttype">Music</a> 
                            </div>
                        </div>
                        <div class="product">
                            <img src="images/librascale.jpg" class="productimage"/>
                            <div class="canvas">
                                <a class="productname">Libra Scale</a>
                                <a class="productprice">$10.00</a><br>
                                <a class="producttype">Music</a> 
                            </div>
                        </div>
                        <div class="product">
                            <img src="images/onifc.jpg" class="productimage"/>
                            <div class="canvas">
                                <a class="productname">O.N.F.I.C.</a>
                                <a class="productprice">$10.00</a><br>
                                <a class="producttype">Music</a> 
                            </div>
                        </div>
                        <div class="product">
                            <img src="images/riot.jpg" class="productimage"/>
                            <div class="canvas">
                                <a class="productname">Riot!</a>
                                <a class="productprice">$10.00</a><br>
                                <a class="producttype">Music</a> 
                            </div>
                        </div>
                        <div class="product">
                            <img src="images/badmeetsevil.jpg" class="productimage"/>
                            <div class="canvas">
                                <a class="productname">Bad Meets Evil</a>
                                <a class="productprice">$10.00</a><br>
                                <a class="producttype">Music</a> 
                            </div>
                        </div>
                        <div class="product">
                            <img src="images/talkthattalk.jpg" class="productimage"/>
                            <div class="canvas">
                                <a class="productname">Talk That Talk</a>
                                <a class="productprice">$10.00</a><br>
                                <a class="producttype">Music</a> 
                            </div>
                        </div>
                        <div class="product" id="p1" onmouseover="largeCanvas()" onmouseout="smallCanvas()">
                            <img src="images/takecare.jpg" class="productimage"/>
                            <div class="canvas" id="c1" onmouseover="largeCanvas()" onmouseout="smallCanvas()">
                                <a class="productname">Take Care</a>
                                <a class="productprice">$10.00</a><br>
                                <a class="producttype">Music</a> 
                            </div>
                        </div>
                        <div class="product">
                            <img src="images/doowops.jpg" class="productimage"/>
                            <div class="canvas">
                                <a class="productname">Doo Wops & Hooligans</a>
                                <a class="productprice">$10.00</a><br>
                                <a class="producttype">Music</a> 
                            </div>
                        </div>
                        <div class="product">
                            <img src="images/fame.jpg" class="productimage"/>
                            <div class="canvas">
                                <a class="productname">F.A.M.E.</a>
                                <a class="productprice">$10.00</a><br>
                                <a class="producttype">Music</a> 
                            </div>
                        </div>
                        <div class="product">
                            <img src="images/projectx.jpg" class="productimage"/>
                            <div class="canvas">
                                <a class="productname">Project X</a>
                                <a class="productprice">$10.00</a><br>
                                <a class="producttype">Music</a> 
                            </div>
                        </div>
                        <div class="product">
                            <img src="images/librascale.jpg" class="productimage"/>
                            <div class="canvas">
                                <a class="productname">Libra Scale</a>
                                <a class="productprice">$10.00</a><br>
                                <a class="producttype">Music</a> 
                            </div>
                        </div>
                        <div class="product">
                            <img src="images/onifc.jpg" class="productimage"/>
                            <div class="canvas">
                                <a class="productname">O.N.F.I.C.</a>
                                <a class="productprice">$10.00</a><br>
                                <a class="producttype">Music</a> 
                            </div>
                        </div>
                        <div class="product">
                            <img src="images/riot.jpg" class="productimage"/>
                            <div class="canvas">
                                <a class="productname">Riot!</a>
                                <a class="productprice">$10.00</a><br>
                                <a class="producttype">Music</a> 
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>

        <div class="mainfooter"> 
            <div class="minfooter">
            </div>
        </div>
    </body>
</html>
